<script setup lang="ts">
import TopHeader from "@/views/TopHeader.vue";
</script>

<template>
  <!-- 页面容器 -->
  <div class="container">
    <!-- 页面主体 -->
    <div class="main">
      <!-- 右侧图表显示区域 -->
      <div class="content">
        <!-- 头部标题 -->
        <div class="header">
          <top-header/>
        </div>
        <div class="char-content">
          <!-- 路由出口 -->
          <router-view/>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
$background-color-header: #2f363c;
$background-color-nav: #545c64;
$background-color-main: #545c64;
.container {
  display: flex;
  flex-direction: column;

  .main {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;


    .content {
      width: 100%;
      background-color: $background-color-main;
      background-image: url('@/assets/img/bg.png');
      background-size: cover;
      box-shadow: 0 0 3px blue;

      .header {
        display: flex;
        justify-content: center;
        height: 10%;
        line-height: 10%;
        font-size: 5vh;
        color: #f9f9f9;
      }

      .char-content {
        flex: 1;
        height: 90%;
        width: 85%;
        margin: auto;
      }
    }
  }
}
</style>